<template>
    <view style="height: 100%">
        <!-- components/group-header/index.wxml -->
        <view class="header-container">
            <!-- <image class="header-image" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png" style="width: 100%"></image> -->
            <!-- :style="'margin-top:' + navBarHeight + 'px;'" -->
            <view class="summary-card" >
                <view class="summary-item">
                    <image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-share.png"></image>
                    <text class="text">发起拼团/参团</text>
                </view>
                <view class="dot-container">
                    <view class="dot-small"></view>
                    <view class="dot-medium"></view>
                    <view class="dot-small"></view>
                </view>
                <view class="summary-item">
                    <image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-group.png"></image>
                    <text class="text">邀请好友参团</text>
                </view>
                <view class="dot-container">
                    <view class="dot-small"></view>
                    <view class="dot-medium"></view>
                    <view class="dot-small"></view>
                </view>
                <view class="summary-item">
                    <image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-gift.png"></image>
                    <text class="text">人满成团</text>
                </view>
            </view>
        </view>
        <!-- <view :style="'margin-top:220rpx;padding-top: ' + navBarHeight + 'px;'"></view> -->
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// components/group-header/index.ts
export default {
    data() {
        return {
            // bar_Height: uni.getSystemInfoSync().statusBarHeight,
            // widnowH: uni.getSystemInfoSync().screenHeight,
            // navBarHeight: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    mounted() {
        // 处理小程序 attached 生命周期
        // this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // attached: function () {
        //     // 在组件实例进入页面节点树时执行
        //     this.setNavBarHeight();
        // },

        // setNavBarHeight() {
        //     let res = uni.getSystemInfoSync();
        //     let navBarHeight = res.statusBarHeight + 44; //顶部状态栏+顶部导航，大部分机型默认44px
        //     this.setData({
        //         navBarHeight
        //     });
        // }
    },
    created: function () {}
};
</script>
<style lang="less" scoped>
// @import '/commin/commin.less'; /* components/group-header/index.wxss */
@import "../../../commin/commin.less";

.header-container {
    // width: 100%;
    // position: fixed;
    // top: 0;
    // top: 15rpx;
    // z-index: 999;
    margin-top: 20rpx;
    .header-image {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width:100%;
		height:335rpx;
        // @kuangao (100%, 335rpx);
        z-index: -1;
    }

    .summary-card {
        width: 702rpx;
        height: 223rpx;
        background: #ffffff;
        box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(153, 165, 177, 0.3);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0 auto;
        .summary-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .img {
                width: 100rpx;
                height: 100rpx;
            }

            .text {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #606266;
                margin-top: 20rpx;
            }
        }

        .dot-container {
            display: flex;
            align-items: center;
            margin-top: -40rpx;

            .dot-small {
                width: 9rpx;
                height: 9rpx;
                background: #dadfe3;
                border-radius: 50%;
            }

            .dot-medium {
                width: 12rpx;
                height: 12rpx;
                background: #fab9a7;
                border-radius: 50%;
                margin: 0 24rpx;
            }
        }
    }
}
</style>
